<template>
	<view class="conbox">
		<view class="container">
			<!-- 背景 -->
			<image src="../../static/img/goldBg.png" class="cont" mode=""></image>
			<!-- <image src="../../static/img/caidai.png" class="caidai" mode=""></image> -->
			<view class="header">
				<view class="header-title">
					<view class="left">
						<text>次数:{{awardsConfig.turnNum}}次</text> <a class="">
							<image src="../../static/img/add.png" mode=""></image>
							了解详情
						</a>
					</view>
					<view class="right">
						金币：<text>{{awardsConfig.coin}}</text>
						<span>({{awardsConfig.money}}元)</span>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="canvas-container">

					<div ref="zhuanPan" :animation="animationData" class="canvas-content" id="ZhuanPan" style="">
						<!-- <view :animation="animationData" class="canvas-content" id="zhuanpano"  :style="[{transform:'rotate('+runDeg+')'}]"> -->
						<!-- <canvas class="canvas" canvas-id="canvas"></canvas> -->
						<view class="canvas-line">
							<view class="canvas-litem" v-for="(item,index1) in awardsList" :key="index1" :style="[{transform:'rotate('+item.lineTurn+')'}]"></view>
						</view>

						<view class="canvas-list">
							<view class="canvas-item" :style="[{zIndex:index2}]" v-for="(iteml,index2) in awardsList" :key="index2">
								<view class="canvas-item-text" :style="[{transform:'rotate('+iteml.turn+')'}]">
									<text>{{iteml.award}}</text>
									<image class="canvas-item-text-img" src="../../static/img/less.png" v-if="iteml.type == 3"></image>
									<image class="canvas-item-text-img" src="../../static/img/more.png" v-if="iteml.type == 2"></image>
									<image class="canvas-item-text-img" src="../../static/img/treasureChest.png" v-if="iteml.type == 1"></image>
									<image class="canvas-item-text-img" src="../../static/img/purse.png" v-if="iteml.type == 0"></image>
								</view>
							</view>
						</view>
					</div>

					<view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">
						<h3>开始转钱</h3>
						<span>{{btnTxt}}</span>
					</view>
				</view>
			</view>
			
			<view class="guize">
				<span>恭喜，宋xx今天一共帮你赚取了600金币。</span>
				<p>每次转动送绑定好友最多200金币，绑定越多收获越多。</p>
				<view class="btnBox">
					<button open-type="share">再送好友20000金币</button>
					<view class="jumpBox">
						<view class="bbsj">
							<image src="../../static/img/bbsj.png" mode=""></image>
						</view>
						<view class="jjdr">
							<image src="../../static/img/jjdr.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				awardsConfig: null,
				awardsList: {},
				animationData: {},
				btnDisabled: '',
				thanksarr: [], //存储谢谢参与的索引
				chishu: 1000,
				mold: 1,
				r_flg: 0,
				myPrizelist: [],
				cumulativeGold: null, //累计赚取的金币
				btnTxt: '本次免费', //开始按钮文案
				ZhuanPan: null,
			}
		},
		onLoad: function() {
			// 获取奖品列表
			this.initdata(this)
		},
		onReady: function(e) {

		},
		//吊起微信原生分享
		onShareAppMessage(res) {
			this.close();
			if (res.from === 'button') { // 来自页面内分享按钮
				this.$post(configUrl.Share, {
					token: uni.getStorageSync("token")
				}).then((res) => {
					console.log(res.data)
				})
			}
			return {
				title: '让红包飞', //分享标题
				path: '/pages/index/index', //页面 path ，必须是以 / 开头的完整路径。
				imageUrl: "", //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径
			}
		},
		methods: {
			// 初始化抽奖数据
			initdata: function(that) {
				// 画转盘
				// that.drawAwardRoundel();
				this.$get(configUrl.changeMoney.index, {
					token: uni.getStorageSync("token")
				}).then((res) => {
					that.awardsConfig = res.data.data
					that.chishu = res.data.data.turnNum;
					console.log(that.awardsConfig.list.length)
					let awarrlength = that.awardsConfig.list.length
					that.drawAwardRoundel();
				})
			},
			//画抽奖圆盘  
			drawAwardRoundel: function() {
				// 拿到奖品列表
				var awards = this.awardsConfig.list;
				var awardsList = [];
				// 每份奖品所占角度
				var turnNum = 1 / awards.length * 360; // 文字旋转 turn 值  
				// 奖项列表  
				for (var i = 0; i < awards.length; i++) {
					awardsList.push({
						turn: i * turnNum + 'deg', //每个奖品块旋转的角度
						lineTurn: i * turnNum + turnNum / 2 + 'deg', //奖品分割线的旋转角度
						award: awards[i].name, //奖品的名字,
						type: awards[i].type,
						id: awards[i].type,
					});
				}
				if (this.chishu == 0) {
					if (this.awardsConfig.coin < 100) {
						uni.showToast({
							title: '金币不足',
							icon: 'none'
						})
						this.btnDisabled = 'disabled'
					}
				}
				// this.btnDisabled = this.chishu ? '' : 'disabled';
				this.awardsList = awardsList;
			},
			//发起抽奖  
			playReward: function() {
				let that = this
				that.runDeg = 60 * Math.random()
				let awardIndex = null;
				this.$get(configUrl.changeMoney.getLucky, {
					token: uni.getStorageSync("token")
				}).then((res) => {
					for (let i = 0; i < that.awardsConfig.list.length; i++) {
						if (res.data.data.lists[0].name == that.awardsConfig.list[i].name) {
							console.log(res.data.data.lists.name == that.awardsConfig.list[i].name, i)
							awardIndex = i;
						}
					}
					//中奖index  
					let awardsNum = that.awardsConfig.list;

					let runNum = 4; //旋转8周  
					let duration = 4000; //时长  

					// 旋转角度  
					that.runDeg = that.runDeg || 0;
					let preDeg = that.runDeg
					that.runDeg = that.runDeg + (360 - that.runDeg % 360) + (360 * runNum - awardIndex * (360 / awardsNum.length)) +
						1
					//创建动画  
					let animationRun = uni.createAnimation({
						duration: duration,
						timingFunction: 'ease'
					})
					animationRun.rotate(that.runDeg).step();
					that.animationData = animationRun.export();
					that.btnDisabled = 'disabled';

					// 中奖提示  
					let awardsConfig = that.awardsConfig;
					let awardType = awardsConfig.list[awardIndex].type;
					that.chishu = that.chishu - 1;
					if (awardType != 0) {
						setTimeout(function() {
							uni.showModal({
								title: '恭喜',
								content: '获得' + (awardsConfig.list[awardIndex].name) + '金币',
								showCancel: false,
								success: function() {
									that.btnTxt = "100金币/次";
									// 置空style  否则动画不生效
									setTimeout(function() {
										that.$refs.zhuanPan.style = ""
									}, 1000)
								}
							});
							that.btnDisabled = '';
						}.bind(that), duration);
					} else {
						setTimeout(function() {
							uni.showModal({
								title: '很遗憾',
								content: '没中奖 ' + (awardsConfig.list[awardIndex].name),
								showCancel: false,
								success: function() {
									that.btnTxt = "100金币/次";
									// 置空style  否则动画不生效
									setTimeout(function() {
										that.$refs.zhuanPan.style = ""
									}, 1000)
								}
							});
							that.btnDisabled = '';
						}.bind(that), duration);
					}
				})
			},

		}

	}
</script>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	input {
		outline: none;
		border: none;
		list-style: none;
	}

	.conbox {
		width: 750upx;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.container,
	image.cont {
		width: 750upx;
		min-height: 100vh;
		height: auto;
		position: relative;
	}

	image.cont {
		height: 100%;
		position: absolute;
		z-index: 0;
	}

	image.caidai {
		position: absolute;
		top: 0;
		left: 0;
		width: 750upx;
		height: 1024upx;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* height: 246upx; */
		box-sizing: border-box;
		position: relative;
		z-index: 3;
	}

	.header-title {
		width: 100%;
		height: 60upx;
		display: flex;
		align-items: center;
		padding: 0 48upx;
		box-sizing: border-box;
		justify-content: space-between;

		image {
			width: 36upx;
			height: 36upx
		}

		.left {
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-family: PingFangSC-Regular;
				font-size: 32upx;
				color: #FFCF85;
				letter-spacing: 0;
				text-align: center;
				// line-height: 45upx;
			}

			a {
				font-family: PingFangSC-Regular;
				font-size: 24upx;
				color: rgba(255, 207, 133, 0.82);
				letter-spacing: 0;
				text-align: center;
			}
		}

		.right {
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: PingFangSC-Regular;
			font-size: 32upx;
			color: #FFCF85;
			letter-spacing: 0;
			text-align: right;
			line-height: 45upx;

			text {
				font-family: PingFangSC-Semibold;
				font-size: 32upx;
				color: #FFFFFF;
				letter-spacing: 0;
				text-align: right;
				line-height: 45upx;
			}

			span {
				font-family: PingFangSC-Regular;
				font-size: 24upx;
				color: #FFCF85;
				letter-spacing: 0;
				text-align: right;
				line-height: 33upx;
			}
		}
	}

	/* 转盘 */
	.canvas-container {
		margin: 0 auto;
		position: relative;
		width: 707upx;
		height: 707upx;
		background-size: cover;
		border-radius: 50%;
	}

	.canvas {
		width: 100%;
		height: 100%;
		display: block !important;
		border-radius: 50%;
	}

	.canvas-content {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 1;
		display: block;
		width: 707upx;
		height: 707upx;
		border-radius: inherit;
		background-clip: padding-box;
		background-image: url("");
		background-size: auto 100%;
	}

	.canvas-element {
		position: relative;
		z-index: 1;
		width: inherit;
		height: inherit;
		border-radius: 50%;
	}

	.canvas-list {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: inherit;
		height: inherit;
		z-index: 9999;
	}

	.canvas-item {
		position: absolute;
		left: 0;
		top: 50upx;
		width: 100%;
		height: 100%;
		color: #e4370e;
		/* text-shadow: 0 1upx 1upx rgba(255, 255, 255, 0.6); */
	}

	.canvas-item-text {
		position: relative;
		display: block;
		padding-top: 46upx;
		margin: 0 auto;
		text-align: center;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FB778B;

	}

	.canvas-item-text text {
		font-size: 30upx;
		font-family: PingFangSC-Semibold;
		font-size: 26upx;
		color: #BB2D39;
		letter-spacing: 0;
		text-align: center;
	}

	.canvas-item-text-img {
		width: 50upx;
		height: 50upx;
		padding-top: 30upx;
	}

	/* 分隔线 */
	.canvas-line {
		position: absolute;
		left: 0;
		top: 0;
		width: inherit;
		height: inherit;
		z-index: 99;
	}

	.canvas-litem {
		position: absolute;
		left: 0;
		top: -298upx;
		right: 0;
		bottom: 0;
		margin: auto;
		/* left: 355upx;
		top: 56upx; */
		width: 3upx;
		height: 300upx;
		// background-color: rgba(228, 55, 14, 0.4);
		overflow: hidden;
		-webkit-transform-origin: 50% 300upx;
		transform-origin: 50% 300upx;
	}

	/**  
* 抽奖按钮  
*/
	.canvas-btn {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;

		/* left: 240upx;
		top: 286upx; */
		z-index: 400;
		width: 142upx;
		height: 108upx;
		/* border-radius: 50%; */
		color: #f4e9cc;
		// line-height: 176upx;
		text-align: center;
		font-size: 26upx;
		text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
		/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6); */
		text-decoration: none;
		background: url("") no-repeat center;
		background-size: auto 100%;
		padding-top: 82upx;

		h3 {
			font-family: PingFangSC-Semibold;
			font-size: 22upx;
			color: #FFFFFF;
			letter-spacing: 0;
			text-align: center;
		}

		span {
			font-family: PingFangSC-Semibold;
			font-size: 16upx;
			color: #FFFFFF;
			letter-spacing: 0;
			text-align: center;
		}
	}

	// 	.canvas-btn.disabled {
	// 		pointer-events: none;
	// 		background: #b07a7b;
	// 		color: #ccc;
	// 	}
	// 
	// 	.canvas-btn-table {
	// 		color: #A83FDB;
	// 		width: 120upx;
	// 		text-align: center;
	// 		position: absolute;
	// 		left: 240upx;
	// 		top: 360upx;
	// 		font-size: 26upx;
	// 		background-color: #FFFFFF;
	// 		opacity: 0.9;
	// 	}

	.guize {
		position: relative;
		display: flex;
		flex-direction: column;
		z-index: 99999999999;
		margin: 0 auto;

		span {
			font-family: PingFangSC-Regular;
			font-size: 20upx;
			color: #FFFFFF;
			letter-spacing: 0;
			text-align: center;
			padding: 12upx 0;
		}

		p {
			width: 100%;
			height: 37upx;
			opacity: 0.66;
			background: rgba(244, 138, 44, 0.50);
			font-family: PingFangSC-Regular;
			font-size: 24upx;
			color: #FFFFFF;
			letter-spacing: 0;
			text-align: center;
		}

		.btnBox {
			margin-top: 28upx;
			font-family: PingFangSC-Semibold;
			font-size: 36upx;
			color: #F95A1F;
			text-align: center;

			button {
				width: 670upx;
				height: 94upx;
				background-image: linear-gradient(-51deg, #FFA733 0%, #FFE461 100%);
				border: 2upx solid rgba(5, 5, 5, 0.08);
				border-radius: 47upx;
				font-size: 36upx;
				color: #F95A1F;
				text-align: center;
			}

			.jumpBox {
				margin-top: 29upx;
				display: flex;
				padding: 0 40upx;
				justify-content: space-between;

				.bbsj,
				.jjdr {
					width: 320upx;
					height: 180upx;
					border-radius: 8upx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
